<template>
  <div class="ranking-">
    <!-- 单品销量排行 -->
    <div class="head">
      <el-row type="flex" align="middle">
        <el-col :span="4" style="text-align: left">
          <p style="font-weight: 700">单品销量排行</p>
        </el-col>
        <el-col :span="10" type="flex" align="middle">
          <div>
            <el-tabs
              style="margin: 0"
              v-model="activeName"
              type="card"
              @tab-click="handleClick"
              :stretch="true"
            >
              <el-tab-pane label="本日" name="first"> </el-tab-pane>
              <el-tab-pane label="本周" name="second"></el-tab-pane>
              <el-tab-pane label="本月" name="third"></el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="10" :offset="1">
          <el-date-picker
            v-model="dateValue"
            style="width: 100%"
            type="daterange"
            range-separator=""
            start-placeholder="请选择日期范围"
          >
          </el-date-picker>
        </el-col>
      </el-row>
    </div>
    <!-- 销量排行数据条 -->
    <div class="content">
      <div style="overflow: auto">
        <ul class="list">
          <li
            v-show="index < show"
            v-for="(item, index) in rankingList"
            :key="index"
            class="list-item"
            style="border-bottom: 2px solid #f6f7f9; padding: 10px"
          >
            <p style="margin: 0">
              <strong>{{ indexDispose(index) }}</strong> {{ item.name }}
            </p>
            <el-progress
              :percentage="item.percentage"
              :format="(val) => format(val, item)"
            >
            </el-progress>
          </li>
        </ul>
        <div class="btn">
          <p
            v-if="this.show < this.rankingList.length"
            @click="more"
            style="text-align: center"
          >
            <el-button size="medium" round>查看更多</el-button>
          </p>
          <p
            v-if="this.show >= this.rankingList.length"
            style="font-size: 14px; color: #666"
          >
            没有更多了~
          </p>

          <p style="margin: 0" v-if="show > 8">
            <el-button type="text" @click="collapse">收起</el-button>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: 8,
      arr: ["总计", "今天", "昨天"],
      rankingList: [
        {
          name: "[莲花]莲花清瘟胶囊0.35g*24粒/盒",
          number: 500,
        },
        {
          name: "[莲花]莲花清瘟胶囊0.35g*24粒/盒",
          number: 300,
        },
        {
          name: "[莲花]莲花清瘟胶囊0.35g*24粒/盒",
          number: 5004,
        },
        {
          name: "[莲花]莲花清瘟胶囊0.35g*24粒/盒",
          number: 5003,
        },
        {
          name: "[莲花]莲花清瘟胶囊0.35g*24粒/盒",
          number: 50,
        },
        {
          name: "[莲花]莲花清瘟胶囊0.35g*24粒/盒",
          number: 50,
        },
        {
          name: "[莲花]莲花清瘟胶囊0.35g*24粒/盒",
          number: 50,
        },
        {
          name: "[莲花]莲花清瘟胶囊0.35g*24粒/盒",
          number: 50,
        },
        {
          name: "[莲花]莲花清瘟胶囊0.35g*24粒/盒",
          number: 50,
        },
        {
          name: "[莲花]莲花清瘟胶囊0.35g*24粒/盒",
          number: 50,
        },
        {
          name: "[莲花]莲花清瘟胶囊0.35g*24粒/盒",
          number: 50,
        },
        {
          name: "[莲花]莲花清瘟胶囊0.35g*24粒/盒",
          number: 50,
        },
      ],
      dateValue: "",
      timeOut: "",
      endVal: 7,
      startVal: 0,
      key: new Date().getTime(),
      chargeTypeData: {},
      activeIndex: 0,
      activeName: "first",
      // 数据列表
      count: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      //默认显示条数
      cou: 8,
    };
  },

  methods: {
    activeHandle(index) {
      console.log(this.activeIndex);
      this.activeIndex = index;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    sort() {
      let list = this.rankingList.sort((x, y) => {
        return y.number - x.number;
      });
      let max = list[0].number;
      list.map((el) => {
        let percentage = (el.number / max) * 100;
        this.$set(el, "percentage", percentage);
      });
      this.rankingList = list;
    },

    format(val, item) {
      return String(item.number);
    },
    indexDispose(index) {
      if (index < 9) {
        return `0${index + 1}`;
      } else {
        return index + 1;
      }
    },

    more() {
      this.show += 3;
    },
    collapse() {
      this.show = 7;
    },
  },
  mounted() {
    this.sort();
  },
};
</script>

<style scoped>
* {
  padding: 0;
}
.head {
  padding-left: 20px;
  /* padding-top:20px */
}
.content {
  padding: 20px;
}
::v-deep .el-tabs__header {
  margin: 0;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 1px solid #2869e2;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  border: 0;
}
</style>



